import {Fragment, useCallback, useRef, useState} from "react";

let timerId = null

// 闭包
// 意味这使用多次Ticker组件访问到的timerId应该是同一个人

export default function Ticker() {
  const [timeCount, setTimeCount] = useState(60);
  const timerIdRef = useRef(1);
  // useRef会返回给你一个对象， 对象里面有一个current属性
  // ref是可读可写的 他不像state需要调用一个setState函数的
  // console.log("timerIdRef", timerIdRef);


  // const [timerId, setTimeId] = useState(null);

  const startTick = useCallback(() => {
    timerIdRef.current = setInterval(() => {
      setTimeCount(prev => prev - 1)
    }, 1000)
    // timerId 的变化有必要造成页面的重新渲染吗？
    // 什么时候应该去使用状态？？ 如果你的组件里的数据需要和react产生链接， 那么你就需要使用状态
    // timerId有必要和react 产生链接吗？ 判断是否需要产生链接的标准是什么，那就是不产生链接的情况下对页面有没有影响
    // 没必要的重新渲染就是对页面性能的浪费
    //  setTimeId(_timerId)
  }, [])
  const stopTick = useCallback(() => {
    // 停止计时器
    if (timerIdRef.current) clearInterval(timerIdRef.current)

  }, [])

  // 有且只有一个根组件 <> </> -----> 是一个语法糖： 语法的糖 React.Fragment
  return (
    <>
      <button onClick={startTick}>start</button>
      <button onClick={stopTick}>stop</button>
      <span>{timeCount}</span>
    </>
  )
}